<template>
  <div class="container">
    <elm-header>
      <template slot="left">
        <span style="margin-left:.1rem;font-size:.15rem">仿饿了么</span>
      </template>
      <template slot="right">
        <van-icon name="user-circle-o" color="#fff" size=".24rem" />
      </template>
    </elm-header>
    <!-- 滚动区域 -->
    <div class="scroller">
      <!-- 定位城市 -->
      <div class="guess-city-box">
        <div class="guess-city_tips">
          <span>当前定位城市</span>
          <span>定位不准确时，请在城市列表中选择</span>
        </div>
        <van-cell class="primary-color" :title="guessCity.name" 
          is-link
          @click="navCity" />
      </div>
      <div class="hot-city-box">
        <city-table :cities="hotCities" 
          title="热门城市"
          textColor="#3190e8"
          @onSelect="handleCitySelect"
        >
        </city-table>
      </div>
      <div class="group-city-box" >
        <city-table 
          v-for="alpha in alphaList" :key="alpha"
          :title="alpha"
          :cities="groupCities[alpha]"
          style="margin-bottom:.12rem"
          @onSelect="handleCitySelect"
        >
        </city-table>
      </div>
    </div>
  </div>
</template>
<script>
import elmHeader from '../../components/elmHeader'
import cityTable from './components/cityTable'
import {getCities} from '../../api/city'
export default {
  components:{
    'elm-header': elmHeader,
    'city-table' : cityTable
  },
  created(){
    this.getCityData()
  },
  data(){
    return {
      guessCity:{name:''},
      hotCities:[],
      groupCities:{}
    }
  },
  computed:{
    alphaList(){
      return Object.keys(this.groupCities).sort()
    }
  },
  methods:{
    // 获取城市数据
    async getCityData(){
      try {
        this.guessCity = await getCities({type:'guess'})
        this.hotCities = await getCities({type:'hot'})
        this.groupCities = await getCities({type:'group'})
      } catch (err) {
        console.log(err);
      }
    },
    // 跳转到city页面
    navCity(){
      const {id, name} = this.guessCity
      this.$router.push({name:'city',params:{id, name}})
    },
    // 选中城市
    handleCitySelect({id, name}){
      console.log(id, name);
      this.$router.push({name:'city',params:{id, name}})
    }

  }
}
</script>
<style lang='scss' scoped>
@import "../../styles/var.scss";
@import "../../styles/mixin.scss";
.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  // 
  .primary-color{
    color: $primary;
  }
  .scroller{
    margin-top: .45rem;
    flex: 1;
    .guess-city-box{
      margin-bottom: .2rem;
      @include grey-bottom-border;
      .guess-city_tips{
        padding: .14rem .16rem;
        display: flex;
        justify-content: space-between;
        background: #fff;
        @include grey-bottom-border;
      }
      .guess-city_tips>span:last-child{
        color: #999;
      }
    }
    .hot-city-box{
      @include grey-top-border;
      margin-bottom: .2rem;
    }
    .group-city-box{
      background: #f5f5f5;
    }
  }

}
</style>